<style type="text/css">
    #upic_uploader{}
    #upic_uploadprogress{}
    .progressWrapper{margin-top:5px;}
    .progressContainer{border-bottom:1px dotted #ddd;padding:2px;}
    .progressName{text-align:left;color:black;margin-left:2px;float:left;}
    .progressBarStatus{color:#666;text-align:right;margin:1px 1px 0 0;font-size:9px;}
    .red{border:solid 1px #B50000;background-color:#FFEBEB;}
    .green{border:solid 1px #DDF0DD;background-color:#EBFFEB;}
    .blue{border:solid 1px #CEE2F2;background-color:#F0F5FF;}
    .progressBarInProgress,.progressBarComplete,.progressBarError{clear:both;font-size:0;width:0%;height:2px;background-color:blue;margin-top:4px;}
    .progressBarComplete{width:100%;background-color:green;visibility:hidden;}
    .progressBarError{width:100%;background-color:red;visibility:hidden;}
</style>


<form method="post" class="form-inline">
    <input type="text" name="image_url" id="upichere" placeholder="Link ของรูปขนาด 530x360 เท่านั้น">
    <input type="text" name="slideshow_url" placeholder="ให้ Link ไปไหน">
    <label class="checkbox">
        <input type="checkbox" name="new_window" value="1"> เปิดหน้าใหม่?
    </label>
    <button type="submit" name="add_new" class="btn btn-success"><i class="icon-plus"></i> เพิ่ม Slideshow</button>
</form>

<script type="text/javascript" src="http://upic.me/js/embedupload.js"></script>
<script type="text/javascript">
    upic_target = "upichere";
    upic_type = "htmlfull";
    upic_buttoncss += "appendcss";

    function upic_custom(urlshow, urlfull, urlthumb) {

        $('#upichere').val(urlfull);

    }
</script>



<?php
if (isset($_POST['add_new'])) {
    ?>
    <div class="alert alert-success"><i class="icon icon-exclamation-sign"></i> เพิ่ม Slideshow ใหม่แล้ว</div>
    <?php
}
if (isset($_POST['edit'])) {
    ?>
    <div class="alert alert-success"><i class="icon icon-exclamation-sign"></i> อัพเดทข้อมูล Slideshow แล้ว</div>
    <?php
}
?>
<?php if ($slideshow_list):?>
<hr/>
<form method="post" class="form-inline">
    <button type="submit" name="edit" class="btn btn-primary pull-right"><i class="icon-pencil"></i> อัพเดท Slideshow</button>
    <div class="clearfix"></div>
    <hr/>
    <?php foreach ($slideshow_list as $slideshow): ?>

        <div class="each_slideshow">
            <img src="<?php echo $slideshow['image_url'] ?>" style="width:100px;">
            <input type="text" name="image_url[]" placeholder="Link ของรูปขนาด 530x360 เท่านั้น" value="<?php echo $slideshow['image_url'] ?>">
            <input type="text" name="slideshow_url[]" placeholder="ให้ Link ไปไหน" value="<?php echo $slideshow['slideshow_url'] ?>">
            <input type="text" name="weight[]" class="input-mini" placeholder="น้ำหนักยิ่งมากยิ่งมาก่อน" value="<?php echo $slideshow['weight'] ?>">
            <select name="new_window[]">
                <option value="" <?php echo $slideshow['new_window'] == '' ? 'selected="selected"' : '' ?>>ไม่เปิดหน้าใหม่</option>
                <option value="1" <?php echo $slideshow['new_window'] == '1' ? 'selected="selected"' : '' ?>>เปิดหน้าใหม่</option>
            </select>
            <a href="javascript:void(0)" class="delete btn btn-danger"><i class="icon icon-remove"></i></a>
            <hr/>
        </div>

    <?php endforeach; ?>
    <button type="submit" name="edit" class="btn btn-primary pull-right"><i class="icon-pencil"></i> อัพเดท Slideshow</button>
    <div class="clearfix"></div>
</form>
<script>
    $(function() {
        $('.delete').click(function() {
            $(this).parent('.each_slideshow').slideUp(function() {
                $(this).remove();
            });
        });
        $('.alert').delay(5000).slideUp();
    });
</script>
<?php endif;?>

